<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./style.css">
  
  <script src="./jquery.min.js"></script>
  <script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>
  <script src="https://unpkg.com/@croquet/croquet"></script>
  <script>
    var fs = require('fs'),appid='defaultchannel';
    try{
      appid = fs.readFileSync(__dirname+"/channel.txt","utf-8").trim();
    }catch(err){
      console.log(err);
    }

    var udid = Date.now().toString(36);
    var lastclick=0;
    class HeartModel extends Croquet.Model {
      init() {
          this.subscribe("heart","click",this.click)
      }

      click(from){
          this.publish("heart", "beat",from);
      }
    }

      class MyView extends Croquet.View {

      constructor(model) {
          super(model);
          this.model = model;
          chest.onclick = (event) => {
            lastclick = Date.now();
            this.publish("heart","click",udid);
          };
          this.subscribe("heart", "beat", this.beat);
      }

      beat(from) {
        if(from!=udid){
          console.log("本次心跳来自于别人");
          if(Date.now()-lastclick<1500){
            //有效回应
            console.log("这是一次有效回应");
            playSound("combo.mp3");
          }
        }else{
          console.log("本次心跳来自于自己");
        }
        heartBeat();
      }
    }

    function playSound(src){
      var snd = new Audio();
      snd.src = src;
      snd.volume = 0.5;
      snd.play();
    }

    function heartBeat(){
      if(window['timer'])return;
      playSound("click.mp3");
      $("#chest").css("animation-play-state","running");
      window['timer']=setTimeout(()=>{
        $("#chest").css("animation-play-state","paused");
        clearTimeout(timer);
        window['timer']=null;
      },700)
    }
    $(document).ready(()=>{
      $("#idInput").val(appid);
      $("#saveidButton").click(()=>{
        $("#settingPanel").hide();
        try{
          fs.writeFileSync(__dirname+"/channel.txt",$("#idInput").val().trim());
          window.location.reload();
        }catch(err){
          console.log(err);
        }
      });

      $("#settingButton").click(()=>{
        $("#settingPanel").show();
      });

      HeartModel.register("HeartModel");
      Croquet.Session.join({
          appId: "com.ezshine.heartconnect."+appid,
          apiKey: "1DjcJMt82Cs13b5IqLfBdC5PHh6i3LqdM4KafOusx",
          name: "unnamed",
          password: "secret",
          model: HeartModel,
          view:MyView
        });

      $("#chest").css("animation-play-state","paused");

      $("#reloadButton").click(()=>{
        window.location.reload();
      });
      $("#exitButton").click(()=>{
        window.close();
      })
    });
  </script>
</head>
<body>
  <div id="chest">
    <div class="heart left side top"></div>
    <div class="heart center">&hearts;</div>
    <div class="heart right side"></div>
  </div>
  <div id='settingPanel' style="display: none;width: 100%;height:100%;position: absolute;z-index: 99999;background: rgba(0,0,0,.7);top:0;left:0;">
    <div style="width: 80%;margin: 0 auto;margin-top: 10px;">
      <div style="width: 100%;text-align: center;color: #fff;margin-bottom: 10px;">交流通道标识ID</div>
      <div style="width: 100%;margin-bottom: 10px;">
        <input id='idInput' placeholder="仅限英文字母" type="text" style="outline: none;width: 100%;height: 40px;text-align: center;line-height: 40px;font-size: 20px;"/>
      </div>
      <div id='saveidButton' style="cursor: pointer;background: #ff3366;border-radius: 15px;width: 100px;text-align: center;height: 30px;line-height: 30px;color: #fff;margin: 0 auto;">保存</div>

      <div style="display: flex;justify-content: space-around;margin-top: 30px;width: 100%;">
        <div id='exitButton' style="cursor: pointer;background: #3366ff;border-radius: 15px;width: 70px;text-align: center;height: 30px;line-height: 30px;color: #fff;font-size: 14px;">退出</div>
        <div id='reloadButton' style="cursor: pointer;background: #3366ff;border-radius: 15px;width: 70px;text-align: center;height: 30px;line-height: 30px;color: #fff;font-size: 14px;">刷新</div>
      </div>
    </div>
  </div>
  <div style="position: absolute;z-index: 9999;top: 10px;right:10px;">
    <div style="cursor: pointer;width: 30px;height: 30px;background: rgba(0,0,0,.3);padding:6px;border-radius: 50%;-webkit-app-region:drag;"><img src="./move.png" draggable="false" style="width: 100%;height: 100%;"/></div>
  </div>
  <div style="position: absolute;z-index: 9999;bottom: 10px;right: 10px;">
    <div id='settingButton' style="cursor: pointer;width: 30px;height: 30px;background: rgba(0,0,0,.3);padding:6px;border-radius: 50%;"><img src="./setting.png" draggable="false" style="width: 100%;height: 100%;"/></div>
  </div>
</body>
</html>
